<template>
  <div class="logs-container fade-in">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2 class="page-title">
            <el-icon class="title-icon">
              <Document />
            </el-icon>
            系统日志
          </h2>
          <p class="page-subtitle">查看和管理系统运行日志、操作记录和错误信息</p>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="refreshLogs">
            <el-icon><Refresh /></el-icon>
            刷新日志
          </el-button>
          <el-button type="success" @click="exportLogs">
            <el-icon><Download /></el-icon>
            导出日志
          </el-button>
          <el-button type="warning" @click="clearLogs">
            <el-icon><Delete /></el-icon>
            清空日志
          </el-button>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="24">
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ totalLogs }}</div>
                <div class="stat-label">总日志数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon error">
                <el-icon><Warning /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ errorLogs }}</div>
                <div class="stat-label">错误日志</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon warning">
                <el-icon><InfoFilled /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ warningLogs }}</div>
                <div class="stat-label">警告日志</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon success">
                <el-icon><Check /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ infoLogs }}</div>
                <div class="stat-label">信息日志</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 实时监控 -->
    <div class="monitor-section">
      <el-card shadow="hover">
        <template #header>
          <div class="monitor-header">
            <h3>实时日志监控</h3>
            <div class="monitor-controls">
              <el-switch
                v-model="autoRefresh"
                active-text="自动刷新"
                inactive-text="手动刷新"
                @change="toggleAutoRefresh"
              />
              <el-button 
                type="primary" 
                size="small" 
                :icon="autoRefresh ? 'VideoPlay' : 'VideoPause'"
                @click="toggleAutoRefresh"
              >
                {{ autoRefresh ? '暂停' : '开始' }}
              </el-button>
            </div>
          </div>
        </template>
        <div class="monitor-content">
          <div class="log-stream" ref="logStreamRef">
            <div 
              v-for="log in realTimeLogs" 
              :key="log.id" 
              class="log-item"
              :class="getLogLevelClass(log.level)"
            >
              <div class="log-time">{{ formatTime(log.timestamp) }}</div>
              <div class="log-level">
                <el-tag :type="getLogLevelTagType(log.level)" size="small">
                  {{ log.level.toUpperCase() }}
                </el-tag>
              </div>
              <div class="log-message">{{ log.message }}</div>
              <div class="log-user">{{ log.user }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 筛选和搜索 -->
    <div class="filter-section">
      <el-card shadow="hover">
        <div class="filter-content">
          <div class="filter-left">
            <el-input
              v-model="searchQuery"
              placeholder="搜索日志内容"
              class="search-input"
              clearable
              prefix-icon="Search"
            />
            <el-select v-model="levelFilter" placeholder="日志级别" clearable>
              <el-option label="全部级别" value="" />
              <el-option label="错误" value="error" />
              <el-option label="警告" value="warning" />
              <el-option label="信息" value="info" />
              <el-option label="调试" value="debug" />
            </el-select>
            <el-select v-model="moduleFilter" placeholder="模块筛选" clearable>
              <el-option label="全部模块" value="" />
              <el-option label="用户管理" value="user" />
              <el-option label="系统管理" value="system" />
              <el-option label="数据管理" value="data" />
              <el-option label="报告管理" value="report" />
            </el-select>
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </div>
          <div class="filter-right">
            <el-button type="primary" plain @click="applyFilters">
              <el-icon><Search /></el-icon>
              应用筛选
            </el-button>
            <el-button @click="resetFilters">重置筛选</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 日志列表 -->
    <div class="logs-list">
      <el-card shadow="hover">
        <template #header>
          <div class="list-header">
            <div class="header-left">
              <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
              <span class="selected-count" v-if="selectedLogs.length > 0">
                已选择 {{ selectedLogs.length }} 项
              </span>
            </div>
            <div class="header-right">
              <el-button 
                type="danger" 
                size="small" 
                :disabled="selectedLogs.length === 0"
                @click="batchDelete"
              >
                <el-icon><Delete /></el-icon>
                批量删除
              </el-button>
            </div>
          </div>
        </template>

        <el-table 
          :data="filteredLogs" 
          style="width: 100%"
          @selection-change="handleSelectionChange"
          v-loading="loading"
          max-height="600"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="timestamp" label="时间" width="180">
            <template #default="{ row }">
              {{ formatDateTime(row.timestamp) }}
            </template>
          </el-table-column>
          <el-table-column prop="level" label="级别" width="100">
            <template #default="{ row }">
              <el-tag :type="getLogLevelTagType(row.level)" size="small">
                {{ row.level.toUpperCase() }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="module" label="模块" width="120">
            <template #default="{ row }">
              <el-tag type="info" size="small">{{ row.module }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="message" label="日志内容" min-width="300">
            <template #default="{ row }">
              <div class="log-message-cell">
                <div class="message-text">{{ row.message }}</div>
                <div class="message-details" v-if="row.details">
                  <el-button type="primary" link size="small" @click="viewDetails(row)">
                    查看详情
                  </el-button>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="user" label="操作用户" width="120" />
          <el-table-column prop="ip" label="IP地址" width="130" />
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button-group>
                <el-button size="small" @click="viewLog(row)">
                  <el-icon><View /></el-icon>
                  查看
                </el-button>
                <el-button size="small" type="danger" @click="deleteLog(row)">
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[20, 50, 100, 200]"
            :total="totalLogs"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 日志详情对话框 -->
    <el-dialog
      v-model="showDetailsDialog"
      title="日志详情"
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="log-details" v-if="selectedLog">
        <div class="detail-section">
          <h4>基本信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="时间">{{ formatDateTime(selectedLog.timestamp) }}</el-descriptions-item>
            <el-descriptions-item label="级别">
              <el-tag :type="getLogLevelTagType(selectedLog.level)" size="small">
                {{ selectedLog.level.toUpperCase() }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="模块">{{ selectedLog.module }}</el-descriptions-item>
            <el-descriptions-item label="操作用户">{{ selectedLog.user }}</el-descriptions-item>
            <el-descriptions-item label="IP地址">{{ selectedLog.ip }}</el-descriptions-item>
            <el-descriptions-item label="用户代理">{{ selectedLog.userAgent }}</el-descriptions-item>
          </el-descriptions>
        </div>
        
        <div class="detail-section">
          <h4>日志内容</h4>
          <div class="log-content">
            <pre>{{ selectedLog.message }}</pre>
          </div>
        </div>
        
        <div class="detail-section" v-if="selectedLog.details">
          <h4>详细信息</h4>
          <div class="log-content">
            <pre>{{ JSON.stringify(selectedLog.details, null, 2) }}</pre>
          </div>
        </div>
        
        <div class="detail-section" v-if="selectedLog.stackTrace">
          <h4>堆栈跟踪</h4>
          <div class="log-content">
            <pre>{{ selectedLog.stackTrace }}</pre>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDetailsDialog = false">关闭</el-button>
          <el-button type="primary" @click="copyLogDetails">
            <el-icon><CopyDocument /></el-icon>
            复制详情
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 导出日志对话框 -->
    <el-dialog
      v-model="showExportDialog"
      title="导出日志"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="export-content">
        <div class="export-options">
          <h4>导出选项</h4>
          <el-form :model="exportForm" label-width="100px">
            <el-form-item label="导出格式">
              <el-radio-group v-model="exportForm.format">
                <el-radio value="excel">Excel</el-radio>
                <el-radio value="csv">CSV</el-radio>
                <el-radio value="json">JSON</el-radio>
                <el-radio value="txt">TXT</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="exportForm.dateRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="日志级别">
              <el-checkbox-group v-model="exportForm.levels">
                <el-checkbox value="error">错误</el-checkbox>
                <el-checkbox value="warning">警告</el-checkbox>
                <el-checkbox value="info">信息</el-checkbox>
                <el-checkbox value="debug">调试</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="包含字段">
              <el-checkbox-group v-model="exportForm.fields">
                <el-checkbox value="timestamp">时间</el-checkbox>
                <el-checkbox value="level">级别</el-checkbox>
                <el-checkbox value="module">模块</el-checkbox>
                <el-checkbox value="message">内容</el-checkbox>
                <el-checkbox value="user">用户</el-checkbox>
                <el-checkbox value="ip">IP地址</el-checkbox>
                <el-checkbox value="details">详情</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showExportDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmExport" :loading="exporting">
            开始导出
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { 
  Document, Refresh, Download, Delete, Warning, InfoFilled, Check, Search,
  VideoPlay, VideoPause, View, CopyDocument
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const loading = ref(false)
const exporting = ref(false)
const autoRefresh = ref(false)
const searchQuery = ref('')
const levelFilter = ref('')
const moduleFilter = ref('')
const dateRange = ref([])
const currentPage = ref(1)
const pageSize = ref(50)
const selectAll = ref(false)
const selectedLogs = ref([])
const showDetailsDialog = ref(false)
const showExportDialog = ref(false)
const selectedLog = ref(null)
const logStreamRef = ref(null)
const autoRefreshTimer = ref(null)

// 导出表单
const exportForm = ref({
  format: 'excel',
  dateRange: [],
  levels: ['error', 'warning', 'info'],
  fields: ['timestamp', 'level', 'module', 'message', 'user', 'ip']
})

// 模拟数据
const logs = ref([
  {
    id: 1,
    timestamp: '2024-01-15 10:30:25',
    level: 'info',
    module: '用户管理',
    message: '用户 admin 登录系统成功',
    user: 'admin',
    ip: '192.168.1.100',
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
    details: { sessionId: 'sess_123456', loginMethod: 'password' }
  },
  {
    id: 2,
    timestamp: '2024-01-15 10:28:15',
    level: 'error',
    module: '数据管理',
    message: '数据库连接失败: Connection timeout',
    user: 'system',
    ip: '192.168.1.1',
    userAgent: 'System Service',
    details: { errorCode: 'DB_001', retryCount: 3 },
    stackTrace: 'Error: Connection timeout\n    at Database.connect (/app/db.js:25:10)\n    at DataService.query (/app/services/data.js:15:8)'
  },
  {
    id: 3,
    timestamp: '2024-01-15 10:25:42',
    level: 'warning',
    module: '系统管理',
    message: '磁盘空间不足，剩余空间: 2.5GB',
    user: 'system',
    ip: '192.168.1.1',
    userAgent: 'System Monitor',
    details: { diskUsage: '97.5%', freeSpace: '2.5GB', threshold: '5GB' }
  },
  {
    id: 4,
    timestamp: '2024-01-15 10:22:18',
    level: 'info',
    module: '报告管理',
    message: '用户 manager 生成了月度报告',
    user: 'manager',
    ip: '192.168.1.101',
    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36',
    details: { reportId: 'rep_202401', reportType: 'monthly', duration: '2.3s' }
  },
  {
    id: 5,
    timestamp: '2024-01-15 10:20:05',
    level: 'debug',
    module: '用户管理',
    message: '用户权限验证通过',
    user: 'admin',
    ip: '192.168.1.100',
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
    details: { permissions: ['user:read', 'user:write', 'admin:all'] }
  }
])

// 实时日志
const realTimeLogs = ref([])

// 计算属性
const totalLogs = computed(() => logs.value.length)
const errorLogs = computed(() => logs.value.filter(log => log.level === 'error').length)
const warningLogs = computed(() => logs.value.filter(log => log.level === 'warning').length)
const infoLogs = computed(() => logs.value.filter(log => log.level === 'info').length)

const filteredLogs = computed(() => {
  let filtered = logs.value

  if (searchQuery.value) {
    filtered = filtered.filter(log => 
      log.message.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      log.user.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      log.module.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }

  if (levelFilter.value) {
    filtered = filtered.filter(log => log.level === levelFilter.value)
  }

  if (moduleFilter.value) {
    filtered = filtered.filter(log => log.module === moduleFilter.value)
  }

  if (dateRange.value && dateRange.value.length === 2) {
    filtered = filtered.filter(log => {
      const logTime = new Date(log.timestamp)
      const startTime = new Date(dateRange.value[0])
      const endTime = new Date(dateRange.value[1])
      return logTime >= startTime && logTime <= endTime
    })
  }

  return filtered
})

// 方法
const getLogLevelTagType = (level) => {
  const types = {
    error: 'danger',
    warning: 'warning',
    info: 'primary',
    debug: 'info'
  }
  return types[level] || 'info'
}

const getLogLevelClass = (level) => {
  return `log-level-${level}`
}

const formatDateTime = (dateStr) => {
  return new Date(dateStr).toLocaleString('zh-CN')
}

const formatTime = (dateStr) => {
  return new Date(dateStr).toLocaleTimeString('zh-CN')
}

const refreshLogs = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('日志已刷新')
  }, 1000)
}

const exportLogs = () => {
  showExportDialog.value = true
  exportForm.value = {
    format: 'excel',
    dateRange: [],
    levels: ['error', 'warning', 'info'],
    fields: ['timestamp', 'level', 'module', 'message', 'user', 'ip']
  }
}

const confirmExport = async () => {
  exporting.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 2000))
    ElMessage.success(`日志导出成功，格式: ${exportForm.value.format}`)
    showExportDialog.value = false
  } finally {
    exporting.value = false
  }
}

const clearLogs = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要清空所有日志吗？此操作不可恢复！',
      '确认清空',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    logs.value = []
    realTimeLogs.value = []
    ElMessage.success('日志已清空')
  } catch {
    // 用户取消操作
  }
}

const viewLog = (log) => {
  selectedLog.value = log
  showDetailsDialog.value = true
}

const viewDetails = (log) => {
  selectedLog.value = log
  showDetailsDialog.value = true
}

const copyLogDetails = () => {
  if (!selectedLog.value) return
  
  const details = JSON.stringify(selectedLog.value, null, 2)
  navigator.clipboard.writeText(details).then(() => {
    ElMessage.success('日志详情已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}

const deleteLog = async (log) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条日志吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const index = logs.value.findIndex(l => l.id === log.id)
    if (index > -1) {
      logs.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  } catch {
    // 用户取消删除
  }
}

const handleSelectionChange = (selection) => {
  selectedLogs.value = selection
  selectAll.value = selection.length === filteredLogs.value.length
}

const handleSelectAll = (val) => {
  if (val) {
    selectedLogs.value = [...filteredLogs.value]
  } else {
    selectedLogs.value = []
  }
}

const batchDelete = async () => {
  if (selectedLogs.value.length === 0) {
    ElMessage.warning('请选择要删除的日志')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedLogs.value.length} 条日志吗？`,
      '批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const ids = selectedLogs.value.map(l => l.id)
    logs.value = logs.value.filter(l => !ids.includes(l.id))
    selectedLogs.value = []
    selectAll.value = false
    ElMessage.success('批量删除成功')
  } catch {
    // 用户取消删除
  }
}

const applyFilters = () => {
  currentPage.value = 1
  ElMessage.success('筛选条件已应用')
}

const resetFilters = () => {
  searchQuery.value = ''
  levelFilter.value = ''
  moduleFilter.value = ''
  dateRange.value = []
  currentPage.value = 1
}

const toggleAutoRefresh = () => {
  if (autoRefresh.value) {
    startAutoRefresh()
  } else {
    stopAutoRefresh()
  }
}

const startAutoRefresh = () => {
  autoRefreshTimer.value = setInterval(() => {
    addRealTimeLog()
  }, 3000)
}

const stopAutoRefresh = () => {
  if (autoRefreshTimer.value) {
    clearInterval(autoRefreshTimer.value)
    autoRefreshTimer.value = null
  }
}

const addRealTimeLog = () => {
  const levels = ['info', 'warning', 'error']
  const modules = ['用户管理', '系统管理', '数据管理', '报告管理']
  const messages = [
    '用户登录成功',
    '数据查询完成',
    '报告生成中',
    '系统检查完成',
    '缓存更新成功',
    '数据库备份开始',
    '邮件发送成功',
    '文件上传完成'
  ]
  
  const newLog = {
    id: Date.now(),
    timestamp: new Date().toISOString(),
    level: levels[Math.floor(Math.random() * levels.length)],
    module: modules[Math.floor(Math.random() * modules.length)],
    message: messages[Math.floor(Math.random() * messages.length)],
    user: 'system',
    ip: '192.168.1.1',
    userAgent: 'System Service'
  }
  
  realTimeLogs.value.unshift(newLog)
  
  // 保持实时日志数量在合理范围内
  if (realTimeLogs.value.length > 50) {
    realTimeLogs.value = realTimeLogs.value.slice(0, 50)
  }
  
  // 滚动到底部
  nextTick(() => {
    if (logStreamRef.value) {
      logStreamRef.value.scrollTop = 0
    }
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

onMounted(() => {
  // 初始化实时日志
  for (let i = 0; i < 10; i++) {
    addRealTimeLog()
  }
})

onUnmounted(() => {
  stopAutoRefresh()
})
</script>

<style scoped>
.logs-container {
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  min-height: 100vh;
}

.page-header {
  margin-bottom: var(--spacing-xl);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.title-section {
  flex: 1;
}

.page-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.title-icon {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* 统计卡片 */
.stats-section {
  margin-bottom: var(--spacing-xl);
}

.stat-card {
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.stat-icon.error {
  background: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
}

.stat-icon.warning {
  background: linear-gradient(135deg, var(--warning-color), var(--warning-dark));
}

.stat-icon.success {
  background: linear-gradient(135deg, var(--success-color), var(--success-dark));
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* 实时监控 */
.monitor-section {
  margin-bottom: var(--spacing-xl);
}

.monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.monitor-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
}

.monitor-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.monitor-content {
  height: 300px;
  overflow: hidden;
}

.log-stream {
  height: 100%;
  overflow-y: auto;
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.log-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  border-radius: var(--radius-sm);
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.log-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.log-level-error {
  background: rgba(245, 108, 108, 0.1);
  border-left: 3px solid var(--danger-color);
}

.log-level-warning {
  background: rgba(251, 191, 36, 0.1);
  border-left: 3px solid var(--warning-color);
}

.log-level-info {
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid var(--primary-color);
}

.log-level-debug {
  background: rgba(107, 114, 128, 0.1);
  border-left: 3px solid var(--text-secondary);
}

.log-time {
  color: var(--text-secondary);
  font-size: 0.8rem;
  min-width: 80px;
}

.log-level {
  min-width: 60px;
}

.log-message {
  flex: 1;
  color: var(--text-primary);
}

.log-user {
  color: var(--text-secondary);
  font-size: 0.8rem;
  min-width: 80px;
}

/* 筛选区域 */
.filter-section {
  margin-bottom: var(--spacing-xl);
}

.filter-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.filter-left {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.search-input {
  width: 300px;
}

.filter-right {
  display: flex;
  gap: var(--spacing-md);
}

/* 日志列表 */
.logs-list {
  margin-bottom: var(--spacing-xl);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.selected-count {
  color: var(--primary-color);
  font-size: 0.9rem;
}

.log-message-cell {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.message-text {
  color: var(--text-primary);
  line-height: 1.4;
}

.message-details {
  display: flex;
  justify-content: flex-end;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-lg);
}

/* 日志详情对话框 */
.log-details {
  padding: var(--spacing-lg) 0;
}

.detail-section {
  margin-bottom: var(--spacing-xl);
}

.detail-section h4 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.log-content {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  max-height: 300px;
  overflow-y: auto;
}

.log-content pre {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 导出对话框 */
.export-content {
  padding: var(--spacing-lg) 0;
}

.export-options h4 {
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .logs-container {
    padding: var(--spacing-md);
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .filter-content {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-left {
    flex-direction: column;
  }

  .search-input {
    width: 100%;
  }

  .stat-content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
  }

  .stat-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  .monitor-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .log-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .log-time,
  .log-level,
  .log-user {
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.5rem;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .monitor-content {
    height: 200px;
  }
}
</style>
